<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="8" lg="8">
                  <!-- 相关宝贝详情 -->
                  <div class="goods-detail">
                    <Divider orientation="left">宝贝详情</Divider>
                    <div class="myPublish-list">
                      <div class="myPublish-item">
                          <div class="item-left">
                              <router-link :to="'/goodsInfo/' + goodInfo.gId"><img :src="goodInfo.mainPic" alt=""></router-link>
                              <div class="goodsinfo">
                                  <router-link :to="'/goodsInfo/' + goodInfo.gId" class="goods-title">{{goodInfo.gTitle}}</router-link>
                                  <p>
                                      <span class="create-type">{{goodInfo.gLevel}}</span>
                                      <span class="list-type"><Icon type="ios-eye" /> {{goodInfo.gViewNum}}</span>
                                      <span class="list-type">
                                          <Icon type="ios-chatbubbles" /> {{msgCount}}
                                      </span>
                                  </p>
                              </div>
                          </div>
                          <div class="item-right">
                              <span class="price">￥{{goodInfo.gPrice}}</span>
                              <span>{{goodInfo.gCreateTime | dataFormat}}</span>
                          </div>
                      </div>
                    </div>
                  </div>
                  <!-- 发送私信区域 -->
                  <div class="userAuthInfo">
                      <Divider orientation="left">私信详情</Divider>
                      <p class="padding">
                          <span class="back" @click="goBack"><Icon type="md-arrow-round-back" /></span>
                          发送私信给 <router-link :to="'/userInfo/' + pmFriend">{{uName}}</router-link></p>
                      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                          <FormItem prop="pmContent">
                              <Input v-model="formValidate.pmContent" type="textarea"
                              :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入私信内容"/>
                          </FormItem>
                          <FormItem>
                              <Button type="primary" @click="save('formValidate')">发送</Button>
                          </FormItem>
                      </Form>
                      <!-- 私信列表 -->
                      <div class="private-list">
                          <div class="private" v-for="(item, i) in msgInfoList" :key="i">
                            <div class="haha" v-if="item.pmGid==gId">
                              <!-- 显示接收方 -->
                              <div class="private-item" v-if="item.pmSender==id">
                                  <div class="private-left">
                                      <router-link :to="'/userInfo/' + item.pmReceiver">
                                      <img :src="item.receiverAvatar" alt=""></router-link>
                                      <div class="private-info">
                                          <router-link :to="'/userInfo/' + item.pmReceiver" class="goods-title">
                                          {{item.receiverName}}</router-link>
                                          <p class="msg-content">{{item.pmContent}}</p>
                                      </div>
                                  </div>
                                  <div class="private-right">
                                      <span class="time">{{item.pmTime | dataFormat}}</span>
                                      <span>
                                          <a href="javascript:void(0)" @click.prevent="deleteById(item.pmId)">
                                          <Icon type="md-trash" /></a>
                                      </span>
                                  </div>
                              </div>
                              <!-- 显示发送方（自己） -->
                              <div class="private-item" v-else>
                                  <div class="private-right">
                                      <span class="time">{{item.pmTime | dataFormat}}</span>
                                      <span>
                                          <a href="javascript:void(0)" @click.prevent="deleteById(item.pmId)">
                                          <Icon type="md-trash" /></a>
                                      </span>
                                  </div>
                                  <div class="private-left">
                                      <div class="private-info2">
                                          <router-link :to="'/userInfo/' + item.pmReceiver" class="goods-title">
                                          {{item.receiverName}}</router-link>
                                          <p class="msg-content">{{item.pmContent}}</p>
                                      </div>
                                      <router-link :to="'/userInfo/' + item.pmReceiver">
                                      <img :src="item.receiverAvatar" alt=""></router-link>
                                  </div>
                              </div>
                            </div>
                          </div>
                          <div class="page-all" v-if="msgInfoList!='' && pmGid==gId">
                              <Page :total="allPages.total" :page-size="pageSize" :current="pageNum" @on-change="changePage"  />
                          </div>
                      </div>
                  </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>

export default {
  name: 'addPrivateMsg',
  data () {
    return {
      pmFriend: this.$route.params.id,
      id: JSON.parse(localStorage.getItem('user')).uId, // 用户id
      gId: this.$route.params.gId, // 商品id
      uName: '', // 发送私信给某某用户
      msgInfoList: [], // 私信详情列表
      pageSize: 4, // 每页显示多少条
      allPages: [], // 存放分页1的信息
      pageNum: 1, // 默认展示第一页数据
      goodInfo: '', // 商品详情
      pmGid: 0, // 私聊相关的商品,
      msgCount: 0, // 评论回复总数
      formValidate: {
        pmContent: ''
      },
      ruleValidate: {
        pmContent: [
          { required: true, message: '私信内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.findByUserAndFriend()
    this.findUser()
    this.findByGoodsId()
  },
  methods: {
    // 发送私信
    save (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'privateMsg/save',
            method: 'post',
            params: {
              pmUser: this.id,
              pmFriend: this.pmFriend,
              pmSender: this.pmFriend,
              pmReceiver: this.id,
              pmContent: this.formValidate.pmContent,
              pmGid: this.gId
            },
            headers: {
              Authorization: localStorage.getItem('token')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.findByUserAndFriend()
              this.formValidate.pmContent = ''
            }
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    // 分页改变页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNum = index
      this.findByUserAndFriend()
    },
    // 根据用户的发送者id(pmUser)和接收者id(pmFriend)查看两用户私信详情
    findByUserAndFriend () {
      this.$axios({
        url: 'privateMsg/findByUserAndFriend/',
        method: 'get',
        params: {
          pmUser: this.id,
          pmFriend: this.pmFriend,
          pageNo: this.pageNum,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.msgInfoList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
          this.msgInfoList.forEach(item => {
            this.pmGid = item.pmGid
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据私信id删除此条私信
    deleteById (id) {
      this.$axios({
        url: 'privateMsg/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findByUserAndFriend()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据用户id查询此用户
    findUser () {
      this.$axios({
        url: 'users/findById/' + this.pmFriend,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.uName = res.data.object.uName
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据商品id查找商品详情
    findByGoodsId () {
      this.$axios({
        url: 'goods/findById/' + this.gId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.goodInfo = res.data.object
          this.$axios({
            url: 'goodsPicture/findMainPicByGoodsId/' + this.goodInfo.gId,
            method: 'get'
          }).then(res => {
            if (res.data.code === 200) {
              // vue给对象新增属性并触发视图更新
              this.$set(this.goodInfo, 'mainPic', res.data.object.gpAddress)
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找商品评论留言数
    findCommentCount () {
      this.$axios({
        url: 'goodsComment/findCountsByGid/' + this.gId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.msgCount = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

</script>
<style scoped>
.userAuthInfo {
  margin-top: 20px;
}
.padding {
  margin-top: 25px;
}
.myPublish-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.item-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.item-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 10px;
}
.goodsinfo p {
    margin-bottom: 0;
    font-size: 11px;
}
.goodsinfo {
    max-width:95%;
}
.goodsinfo>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.item-right span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.item-right .price {
    color: #ef4238;
    font-size: 14px;
}
.create-type {
    margin-right: 10px;
    color: #1890ff;
    background: #eeeeee;
    padding: 1px 2px;
    border-radius: 2px;
}
.list-type {
    margin-right: 10px;
    color: #515a6e;
}

.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 520px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.userAuth-title {
    text-align: center;
    margin-bottom: 50px;
}
.back {
    cursor: pointer;
    margin-right: 10px;
}

.private-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.private-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.private-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 50%;
}
.private-info p {
    margin-bottom: 0;
    font-size: 12px;
}
.private-info {
    max-width:95%;
}
.private-info>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
.private-right>span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.private-info2 p {
    margin-bottom: 0;
    font-size: 12px;
}
.private-info2 {
    max-width:95%;
    text-align: right;
    margin-right: 10px;
}
.private-info2>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
</style>
